<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读取远程服务数据http</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app01" ng-controller="ctrl01">
        <ul>
            <li ng-repeat="site in sites">
                <a href="{{site.Url}}">{{site.Name}}</a>
            </li>
        </ul>
    </div>
    <script>
        var app01=angular.module("app01",[]);
        app01.controller("ctrl01",function ($scope,$http) {
            $http.get("data/data.json").success(function (response) {
                $scope.sites=response.sites;
            });
        });
    </script>
    <h2>链式调用</h2>
    <div ng="app02" ng-controller="ctrl02" id="app02">
        {{result}}
    </div>
    <script>
        var app02=angular.module("app02",[]);
        app02.controller("ctrl02",function ($scope,$http,$timeout) {
            $scope.result="正在加载……";
           $timeout(function () {
               $http({
                   method:"get",
                   url:"data/data.json"
               }).success(function (response) {

               }).error(function (response) {
                   $scope.result=response;
               });
           },2000);
        });
        angular.bootstrap(document.getElementById("app02"), ['app02']);
    </script>
    <h2>返回一个promise对象</h2>
    <div ng-app="app03" ng-controller="ctrl03" id="app03">
        {{result}}<br/>
        <b>status：</b>{{status}}<br/>
        <b>config：</b>{{config}}<br/>
        <b>status</b>{{status}}<br/>
    </div>
    <script>
        var app03=angular.module("app03",[]);
        app03.controller("ctrl03",function ($scope,$http) {
           var promise=$http.get("data/data.json");
           promise.success(function (response) {
               $scope.result=response.sites;
           }).error(function (response) {
               $scope.result='error';
           });
            promise.success(function(data,status,config,headers){
                $scope.status=status;
                $scope.config=config;
                $scope.status=headers;
            });
            promise.error(function(data,status,config,headers){
                $scope.status='error';
                $scope.config='error';
                $scope.status='error';
            });
        });
        angular.bootstrap(document.getElementById("app03"),["app03"]);
    </script>
    <h2>链式调用</h2>
    <div ng="app04" ng-controller="ctrl04" id="app04">
        {{result}}
        <br/><b>method:</b>GET/DELETE/HEAD/JSONP/POST/PUT
        <br/><b>params:</b>(字符串map或者对象)
        <br/><b>data:blob:</b>var blob=new Blob(['Hello world'],{type:'text/plain'});
        <br/><b>缓存HTTP请求:</b>$http.get('/api/users.json',{ cache: true })
    </div>
    <script>
        var app04=angular.module("app04",[]);
        app04.controller("ctrl04",function ($scope,$http,$timeout) {
            $scope.result="正在加载……";
            $timeout(function () {
                $http({
                    method:"get",
                    url:"data/data.json",
                    params:{
                        "code":"003"
                    }
                }).success(function (response) {
                    $scope.result=response;
                }).error(function (response) {
                    $scope.result=response;
                });
            },2000);
        });
        angular.bootstrap(document.getElementById("app04"), ['app04']);
    </script>
</body>
</html>